// // import React from "react";

// // import { defaultValueCtx, Editor, rootCtx } from "@milkdown/core";
// // import { nord } from "@milkdown/theme-nord";
// import { ReactEditor, useEditor } from "@milkdown/react";
// // import { commonmark } from "@milkdown/preset-commonmark";
// // import { emoji } from "@milkdown/plugin-emoji";

// import {
//     defaultValueCtx,
//     Editor,
//     editorViewOptionsCtx,
//     EditorViewReady,
//     MilkdownPlugin,
//     rootCtx,
// } from '@milkdown/core';
// import { clipboard } from '@milkdown/plugin-clipboard';
// import { cursor } from '@milkdown/plugin-cursor';
// import { diagram } from '@milkdown/plugin-diagram';
// import { emoji } from '@milkdown/plugin-emoji';
// import { history } from '@milkdown/plugin-history';
// import { indent } from '@milkdown/plugin-indent';
// import { listener, listenerCtx } from '@milkdown/plugin-listener';
// import { math } from '@milkdown/plugin-math';
// import { prism } from '@milkdown/plugin-prism';
// import { slash } from '@milkdown/plugin-slash';
// import { tooltip } from '@milkdown/plugin-tooltip';
// import { upload } from '@milkdown/plugin-upload';
// import { gfm } from '@milkdown/preset-gfm';
// import { nord } from '@milkdown/theme-nord';

// const complete =
//     (callback: () => void): MilkdownPlugin =>
//     () =>
//     async (ctx) => {
//         await ctx.wait(EditorViewReady);

//         callback();
//     };

// export const MilkdownEditor = ()=>{
//   const editor = useEditor((root) =>
//     Editor.make()
//       .config((ctx) => {
//         ctx.set(rootCtx, root);
//           ctx.set(defaultValueCtx, "\r\n# Milkdown\r\n\r\n![greeting bear](https://preview.redd.it/us7w1x2zx8461.jpg?auto=webp&s=077a73d5c08aec0bc0fb48c5e5be40c928467bb6)\r\n\r\n> Milkdown 是一个所见即所得的编辑器框架。\r\n>\r\n> :baby_bottle: 这里是[代码仓库](点击右键打开链接)。\\\r\n> 我们 ~~只支持 commonmark~~. GFM 也支持！\r\n\r\n您可以在**双栏编辑模式**中看到 markdown 文本。\r\n\r\n-   特性\r\n    -   [x] 📝 **所见即所得的 Markdown** - 以一种优雅的方式编写 markdown\r\n    -   [x] 🎨 **可定制主题** - 主题可以通过 npm 包安装和共享\r\n    -   [x] 🎮 **可交互** - 通过插件支持你的脑洞\r\n    -   [x] 🦾  **值得信赖** - 基于[prosemirror](https://prosemirror.net/) 和 [remark](https://github.com/remarkjs/remark)构建\r\n    -   [x] ⚡ **斜线指令和工具条** - 让任何人都可以使用，通过插件\r\n    -   [x] 🧮 **数学支持** - LaTeX 数学公式支持，通过插件\r\n    -   [x] 📊 **表格支持** - 拥有流畅的 ui 的表格支持， 通过插件\r\n    -   [x] 📰 **图表支持** - 基于[mermaid](https://mermaid-js.github.io/mermaid/#/)的图表支持，通过插件\r\n    -   [x] 🍻 **协同编辑** - 基于[yjs](https://docs.yjs.dev/)的协同编辑支持，通过插件\r\n    -   [x] 💾 **剪贴板** - 支持 markdown 格式的复制粘贴，通过插件\r\n    -   [x] :+1: **Emoji** - 支持 emoji 快捷指令和选择器，通过插件\r\n-   作者\r\n    -   开发者: [Mirone][mirone]\r\n    -   设计师: [Meo][meo]\r\n\r\n---\r\n\r\n你可以添加行 内代码例如 `inline code` 和代码块：\r\n\r\n```javascript\r\nfunction main() {\r\n    console.log('Hello milkdown!');\r\n}\r\n```\r\n\r\n> Tips: 使用`Mod-Enter`来退出块级元素，例如代码块。\r\n\r\n---\r\n\r\n你可以输入`||`和一个空格来创建表格：\r\n\r\n| 表头 1 |   表头 2   |\r\n| ------ | :--------: |\r\n| 内容 1 | ~~内容 1~~ |\r\n| 内容 2 | **内容** 2 |\r\n\r\n---\r\n\r\n数学公式通过 [TeX 表达式](https://en.wikipedia.org/wiki/TeX)支持。\r\n\r\n这里我们有行内公式： $E = mc^2$，你可以点击并编辑它。\r\n\r\n数学公式块也是支持的。\r\n\r\n$$\r\n\\begin{aligned}\r\nT( (v_1 + v_2) \\otimes w) &= T(v_1 \\otimes w) + T(v_2 \\otimes w) \\\\\r\nT( v \\otimes (w_1 + w_2)) &= T(v \\otimes w_1) + T(v \\otimes w_2) \\\\\r\nT( (\\alpha v) \\otimes w ) &= T( \\alpha ( v \\otimes w) ) \\\\\r\nT( v \\otimes (\\alpha w) ) &= T( \\alpha ( v \\otimes w) ) \\\\\r\n\\end{aligned}\r\n$$\r\n\r\n你可以输入`$$`和一个空格来创建数学公式块。\r\n\r\n---\r\n\r\n使用 [emoji 快捷指令](https://www.webfx.com/tools/emoji-cheat-sheet/) 例如 `:+1:` 来添加 emoji.\r\n\r\n在输入时，你许注意到了 emoji 过滤器，尝试输入`:baby`来查看它。\r\n\r\n你也可以输入`:emoji:`来打开 emoji 选择器。\r\n\r\n---\r\n\r\n图表由 [mermaid](https://mermaid-js.github.io/mermaid/#/)驱动。\r\n\r\n你可以输入 _\\`\\`\\`mermaid_ 来添加图表。\r\n\r\n```mermaid\r\ngraph TD;\r\n    EditorState-->EditorView;\r\n    EditorView-->DOMEvent;\r\n    DOMEvent-->Transaction;\r\n    Transaction-->EditorState;\r\n```\r\n\r\n---\r\n\r\nHave fun!\r\n\r\n[repo]: https://github.com/Saul-Mirone/milkdown\r\n[prosemirror]: https://prosemirror.net/\r\n[yjs]: https://docs.yjs.dev/\r\n[remark]: https://github.com/remarkjs/remark\r\n[mirone]: https://github.com/Saul-Mirone\r\n[meo]: https://www.meo.cool/");
//           ctx.set(editorViewOptionsCtx, { editable: () => !readOnly });
//             ctx.set(listenerCtx, { markdown: onChange ? [onChange] : [] });
//       })

//         .use(nord)
//         .use(gfm)
//         // .use(codeSandBox)
//         .use(complete(() => setEditorReady(true)))
//         .use(clipboard)
//         .use(listener)
//         .use(history)
//         .use(cursor)
//         .use(prism)
//         .use(diagram)
//         .use(tooltip)
//         .use(math)
//         .use(emoji)
//         .use(indent)
//         .use(upload)
//         .use(slash);
//   );
//   return (
//     <div className="App">
//       <ReactEditor editor={editor} />
//     </div>
//   );
// }




// // import { codeSandBox } from './codeSandBox';

// // const complete =
// //     (callback: () => void): MilkdownPlugin =>
// //     () =>
// //     async (ctx) => {
// //         await ctx.wait(EditorViewReady);

// //         callback();
// //     };

// export const createEditor = (
//     root: HTMLElement | null,
//     defaultValue: string,
//     readOnly: boolean | undefined,
//     setEditorReady: (ready: boolean) => void,
//     onChange?: (getMarkdown: () => string) => void,
// ) => {
//     const editor = Editor.make()
//         .config((ctx) => {
//             ctx.set(rootCtx, root);
//             ctx.set(defaultValueCtx, defaultValue);
//             ctx.set(editorViewOptionsCtx, { editable: () => !readOnly });
//             ctx.set(listenerCtx, { markdown: onChange ? [onChange] : [] });
//         })
//         .use(nord)
//         .use(gfm)
//         // .use(codeSandBox)
//         .use(complete(() => setEditorReady(true)))
//         .use(clipboard)
//         .use(listener)
//         .use(history)
//         .use(cursor)
//         .use(prism)
//         .use(diagram)
//         .use(tooltip)
//         .use(math)
//         .use(emoji)
//         .use(indent)
//         .use(upload)
//         .use(slash);

//     return editor;
// };